<template>
  <el-container>
    <el-header>
      <span class="siteIcon" style="font-size: 24px; color: #e9eef3">
        <img :src="logo" @click="returnlink" style="height: 70px" />
      </span>
      <span class="return">
        <el-button
          type="text"
          @click="returnlink"
          style="font-size: 24px; color: #e9eef3"
          >回到首页</el-button
        >
      </span>
      <el-dropdown class="cyr-drop" v-if="this.$store.getters.isLogin==true||this.$store.getters.isLogin=='true'">
        <span class="el-dropdown-link">
            <span
            class="span4"
            style="
              width: 100px;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              white-space: normal;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              float: right;
              font-weight:600;">
            {{ $store.getters.userName }}
          </span>
          <div class="span4" style="float: right;font-weight:600;">您好,</div>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="returnmydoor">我的门户</el-dropdown-item>
            <el-dropdown-item divided @click="returnperinfo"
              >账户信息</el-dropdown-item
            >
            <el-dropdown-item divided @click="returnout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button
        class="login"
        type="text"
        @click="login"
        style="font-size: 24px; color: #e9eef3;font-weight:600;"
        v-else
        >登录</el-button
      >
    </el-header>
    <el-container>
      <el-aside>
        <div class="base1">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>基本信息</span>
                <el-button
                  class="delete"
                  type="danger"
                  @click="delete_form_visiable = true"
                  v-if="this.$store.getters.isLogin==true||this.$store.getters.isLogin=='true'"
                  >认领门户</el-button
                >
                <el-dialog v-model="delete_form_visiable" title="认领理由">
                  <el-form class="cyr">
                    <el-form-item>
                      <el-input
                        v-model="reason"
                        type="textarea"
                        maxlength="100"
                        show-word-limit
                        placeholder="请输入您的学术邮箱"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        @click="SubmitInformation()"
                        style="margin-right: 20px"
                        >提交申请</el-button
                      >
                    </el-form-item>
                  </el-form>
                </el-dialog>
                <el-button
                  type="primary"
                  class="info"
                  @click="appeal"
                  v-if="this.$store.getters.isLogin==true||this.$store.getters.isLogin=='true'"
                  >门户申诉</el-button
                >
              </div>
            </template>
            <el-descriptions
              class="margin-top"
              title=""
              :column="1"
              :size="size"
              v-loading="loading"
            >
              <el-descriptions-item label="学者姓名">
                <span>
                  {{ form.name }}
                </span>
                <span v-if="this.whether_person == true">
                  <el-tag
                    size="small"
                    style="margin-left: 10px"
                    :type="type"
                    effect="dark"
                    >个人</el-tag
                  >
                </span>
                <span v-if="this.whether_person == false">
                  <el-tag
                    size="small"
                    style="margin-left: 10px"
                    :type="type"
                    effect="dark"
                    >机构</el-tag
                  >
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="性别">{{
                form.sex
              }}</el-descriptions-item>
              <el-descriptions-item label="生日">{{
                form.birthday
              }}</el-descriptions-item>
              <el-descriptions-item label="工作单位">{{
                form.company
              }}</el-descriptions-item>
              <el-descriptions-item label="联系方式">{{
                form.resource
              }}</el-descriptions-item>
              <el-descriptions-item label="专业领域">
                <span v-for="(item, index) in form['type']" :key="index">
                  <el-tag size="small" style="margin-left: 3px">{{
                    item
                  }}</el-tag>
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="影响因子">{{
                form.influence
              }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>合作学者</span>
              </div>
            </template>
            <div
              class="tongshi"
              v-for="(item, index) in cooperate_info"
              :key="index"
              v-loading="loading"
            >
              <span
                class="spandoor"
                @click="go_to_door(item.id)"
                style="font-size: 20px"
              >
                {{ item.name }}</span
              >
            </div>
          </el-card>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>同事</span>
              </div>
            </template>
            <div
              class="tongshi"
              v-for="(item, index) in colleague_info"
              :key="index"
              v-loading="loading"
            >
              <span
                class="spandoor"
                @click="go_to_door(item.id)"
                style="font-size: 20px"
              >
                {{ item.name }}</span
              >
            </div>
          </el-card>
        </div>
      </el-aside>
      <el-main>
        <div class="base">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>学术成果</span>
              </div>
            </template>
            <div
              v-if="acd_ach.length == 0"
              style="
                text-align: center;
                color: grey;
                font-size: 20px;
                padding-top: 100px;
              "
              v-loading="loading"
            >
              <el-empty description="暂无文献"></el-empty>
            </div>
            <div
              class="quList"
              v-for="(item, index) in acd_ach"
              :key="index"
              v-loading="loading2"
            >
              <div class="qu">
                <div class="name">
                  <span
                    class="spandoor"
                    @click="go_to_detail(item.id)"
                    style="font-size: 20px"
                  >
                    {{ item.title }}</span
                  >
                </div>
                <div class="more">{{ item.jigou }}--{{ item.nianfen }}</div>
              </div>
            </div>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="this.total"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </el-card>

          <el-card class="pic">
            <template #header>
              <div class="card-header">
                <span>专家关系网</span>
              </div>
            </template>
            <div
              v-if="chartData.length == 0"
              style="
                text-align: center;
                color: grey;
                font-size: 20px;
                padding-top: 100px;
              "
              v-loading="loading"
            >
              <el-empty description="暂无图片"></el-empty>
            </div>
            <div class="echartLayout">
              <div
                id="container"
                style="width: 700px; height: 490px; overflow: hidden"
                v-loading="loading"
              ></div>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import { Delete, WarningFilled } from "@element-plus/icons";
import * as echarts from "echarts";
import imgSrc from "../assets/ren.png";
import logo from "../assets/no_border.png";
import axios from "axios";
import qs from "qs";
export default defineComponent({
  setup() {
    const state = reactive({
      // door_id:"42851",
      // door_id:"9914",
      whetherin: "",
      total: "",
      loading: "true",
      loading2: "",
      logo,
      reason: "",
      delete_form_visiable: false,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      whether: true,
      Delete,
      WarningFilled,
      form: {},
      cooperate_info: [],
      colleague_info: [],
      acd_ach: [],
      myChart: null,
      chartData: [],
      chartLink: [],
      formLabelWidth: "120px",
    });
    return {
      type: "success",
      ...toRefs(state),
    };
  },
  methods: {
    //认领门户
    SubmitInformation() {
      let temp = {};
      temp["user_id"] = String(this.$store.getters.userID);
      temp["portalid"] = String(this.$store.getters.portal_id);
      temp["msg_u_to_a"] = this.reason;
      let data = qs.stringify(temp);
      axios.post("claimPortal/", data).then((response) => {
        console.log(response.data);
        if (response.data.code == 200) {
          this.$message({
            type: "success",
            message: "提交成功!",
          });
        } else {
          this.$message({
            type: "error",
            message: response.data.msg,
          });
        }
      });
    },
    go_to_detail(id) {
      console.log(id);
      localStorage.setItem("id",id);
      this.$router.push({
        name: "Detail",
        params: {
          id: id,
        },
      });
    },
    go_to_door(id) {
      this.$store.commit("updatePID", id);
      window.location.reload();
    },
    handleCurrentChange(val) {
      this.loading2 = true;
      axios
        .post("portal_get_academic_by_page/", {
          expert_id: this.$store.getters.portal_id,
          page: val,
        })
        .then((response) => {
          console.log(response.data);
          this.acd_ach = response.data.acd_ach;
          this.loading2 = false;
        });
    },
    GetUserInfo() {
      if(this.$route.params.id){this.$store.commit("updatePID", this.$route.params.id);
      }
      axios
        .post("port_info/", { expert_id: this.$store.getters.portal_id })
        .then((response) => {
          console.log(response.data);
          if (response.data.code == 0) {
            this.whether_person = response.data.whether_person;
            this.form = response.data.form;
            if (response.data.form["sex"] == "F") this.form["sex"] = "女";
            if (response.data.form["sex"] == "M") this.form["sex"] = "男";
            if (
              response.data.form["birthday"] == "0001-01-01" ||
              response.data.form["birthday"] == null
            ) {
              this.form.birthday = "暂无";
            }
            this.total = response.data.pages * 6;
            this.colleague_info = response.data.colleague_info;
            this.cooperate_info = response.data.cooperate_info;
            this.acd_ach = response.data.acd_ach;
            this.chartData = response.data.net[0];
            this.chartLink = response.data.net[1];
            this.$store.state.own_door = response.data.whether;
            // this.door_id=this.$route.query.index;
            this.initEchart();
            this.loading = false;
            this.loading2 = false;
          } else {
            alert(response.data.msg);
          }
        });
    },
    appeal() {
      this.$router.push({
        name: "Doorappeal",
        params: {
          id: this.$store.getters.portal_id,
        },
      });
    },
    returnmydoor() {
      if (this.$store.state.own_door == true||this.$store.state.own_door == "true") {
        if (this.$store.state.isCompany == true||this.$store.state.isCompany == "true") {
          this.$router.push("/mycompanydoor");
        } else this.$router.push("/mydoortrue");
      } else this.$router.push("/mydoorfalse");
    },
    returnperinfo() {
      this.$router.push("/personalcenterforsee");
    },
    returnout() {
      this.$router.push("/");
      this.$store.commit("updateown_door", false);
      this.$store.commit("updateUserName", "");
      this.$store.commit("updateUserID", "");
      this.$store.commit("updateUserEmail", "");
      this.$store.commit("updateCTA", "");
      this.$store.commit("updateMPID", "");
      this.$store.commit("updatePID", "");
      this.$store.commit("updateIsLogin", false);
    },
    returnlink() {
      this.$router.push("/");
    },
    login() {
      this.$router.push("/login");
    },
    initEchart() {
      let dom = document.getElementById("container");
      this.myChart = echarts.init(dom);
      let option = {
        tooltip: {
          show: false,
        },
        series: [
          {
            edgeLabel: {
              normal: {
                formatter: "{c}",
                show: true,
              },
            },
            edgeSymbol: "circle",
            force: {
              repulsion: 2000,
            },
            layout: "force",
            roam: true,
            itemStyle: {
              normal: {
                color: "#A59EAD",
              },
              //鼠标放上去有阴影效果
              emphasis: {
                shadowColor: "#A59EAD",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 40,
              },
            },
            label: {
              normal: {
                show: true,
              },
            },
            //头像
            symbol: `image://${imgSrc}`,
            symbolSize: 86,
            type: "graph",
            links: this.chartLink,
            data: this.chartData,
          },
        ],
      };
      this.myChart.setOption(option);
      this.myChart.on("click", function (params) {
        console.log(params.data); //获取点击的头像的数据信息
      });
    },
  },
  mounted() {
    this.initEchart();
  },
  created() {
    this.GetUserInfo();
  },
});
</script>
<style scoped>
.el-header {
  background-color: #1047b4;
  color: #1047b4;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-button--text {
  border-color: transparent;
  color: var(--el-color-primary);
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
  font-weight: 600;
}
.siteIcon {
  position: absolute;
  left: 100px;
  top: -5px;
  color: #e9eef3;
}
.return {
  position: absolute;
  left: 230px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
.login {
  position: absolute;
  right: 120px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
.el-dropdown {
  position: absolute;
  left: 1200px;
  color: #e9eef3;
  font-size: 22px;
  font-weight: 400;
  line-height: 60px;
}
.el-main {
  width: 1000px;
  color: #333;
  text-align: left;
}
.el-aside {
  width: 500px;
  color: #333;
  text-align: left;
}
.base1 {
  margin-left: 100px;
  margin-top: 30px;
  width: 500px;
  position: absolute;
}
.card-header {
  font-size: 20px;
  font-weight: bold;
  color: #1047b4;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  height: 30px;
}
.base1 .delete {
  position: absolute;
  left: 270px;
}
.base1 .info {
  position: absolute;
  left: 380px;
}

.el-select .el-input__inner {
  cursor: pointer;
  display: inline-flex;
  border-top: 2px solid;
  border-bottom: 2px solid;
  /* background-color: #0c7dec; */
  /* border-right: rgb(195, 212, 241); */
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  color: rgb(242, 245, 248);
  border: transparent;
  width: fit-content;
}
.base .el-select .el-input__inner {
  cursor: pointer;
  display: inline-flex;
  background-color: var(--el-input-background-color, var(--el-color-white));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  border: var(--el-input-border, var(--el-border-base));
  box-sizing: border-box;
  color: var(--el-input-font-color, var(--el-text-color-regular));
  width: 250px;
}

.base {
  width: 800px;
  margin-top: 10px;
  position: absolute;
  left: 620px;
}
.base .work {
  position: absolute;
  left: 680px;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.qu {
  margin-top: 15px;
  margin-left: 20px;
  margin-bottom: 20px;
}
.tongshi {
  margin: 10px;
  color: dodgerblue;
}
.pic {
  height: 600px;
}
.spandoor {
  color: rgb(91, 154, 248);
}
.spandoor:hover {
  cursor: pointer;
  color: rgb(40, 192, 184);
}

</style>